<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="addGroup('')"
          >创建标签组</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
        :scroll="{ x: true }"
      >
     
      <span
          slot="useChanelList"
          slot-scope="record"
         
        >
          <a-tag
            v-for="(item,index) in record.useChanelList"
            :key="index"
            :color="'blue'"
             style="margin-bottom:5px"
          >
              {{item}}
          </a-tag>
        </span>
        <span
          slot="states"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span
            class="start"
            v-if="record.states == 'N'"
          >
            禁用
          </span>
          <span
            class="end"
            v-else
          >
            启用
          </span>
        </span>
        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            v-if="record.states == 'Y'"
            class="mr-10"
            @click="changeGroup(record,2)"
          >
            禁用
          </a>
          <a
            v-else
            class="mr-10"
            @click="changeGroup(record,1)"
          >
            启用
          </a>
          <a
            class="mr-10"
            @click="addGroup(record)"
          >
            编辑
          </a>

          <a
            class="mr-10"
            @click="addLabel(record,1)"
          >
            添加标签
          </a>
        </template>
        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :data-source="text.peoplePackageTagsDetail"
          :pagination="false"
        >
          <span
          slot="peoplePackageNames"
          slot-scope="record"
         
        >
          <a-tag
            v-for="(item,index) in record.peoplePackageNames"
            :key="index"
            :color="'orange'"
             style="margin-bottom:5px"
          >
              {{item}}
          </a-tag>
        </span>
          <span
            slot="states"
            slot-scope="txt, record"
            style="margin-left:5px"
          >
            <span
              class="start"
              v-if="record.states == 'N'"
            >
              禁用
            </span>
            <span
              class="end"
              v-else
            >
              启用
            </span>
          </span>
          <template
            slot="action"
            slot-scope="txt, record"
          >
            <a
              v-if="record.states == 'Y'"
              class="mr-10"
              @click="changeGroup(record,2)"
            >
              禁用
            </a>
            <a
              v-else
              class="mr-10"
              @click="changeGroup(record,1)"
            >
              启用
            </a>
            <a
              class="mr-10"
              @click="addLabel(record,2)"
            >
              编辑
            </a>

            <a
              class="mr-10"
              @click="showBag(record)"
            >
              关联人群包
            </a>
          </template>
        </a-table>
      </a-table>
      <create
        v-if="showGroup"
        :group="group"
        @close="close"
      ></create>
      <addLabel
        v-if="showLabel"
        :label="label"
        :type="type"
        @closeLabel="closeLabel"
      ></addLabel>
       <showBag
       ref="showbag"
        :bag="bag"
        @changeData="changeData"
        @handleCancel="handleCancel"
      ></showBag>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import addLabel from './label.vue'
import showBag from './bag.vue'
import { postAction, getAction } from '@/api/manage'
import { tagList} from '@api/label/index'

const columns = [
  {
    title: '标签组',
    dataIndex: 'tagName'
  },
  {
    title: '标签组顺序',
    dataIndex: 'tagOrder',
    sorter: (a, b) => b.tagOrder - a.tagOrder,

  },
  {
    title: '应用渠道',
    scopedSlots: { customRender: 'useChanelList' }

  },
  {
    title: '状态',
    width: 100,
    scopedSlots: { customRender: 'states' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
const innerColumns = [
  {
    title: '标签',
    dataIndex: 'tagName'
  },
  {
    title: '标签顺序',
    dataIndex: 'tagOrder',
    sorter: (a, b) => b.tagOrder - a.tagOrder,
  },
  {
    title: '关联人群包',
    scopedSlots: { customRender: 'peoplePackageNames' }
  },
  {
    title: '状态',
    width: 100,
    scopedSlots: { customRender: 'states' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create,
    addLabel,
    showBag
  },
  data() {
    return {
      columns,
      innerColumns,
      form: this.$form.createForm(this),
      showGroup: false,
      innerData: [],
      showLabel: false,
      visible: false,
      patt: 'api/gateway/basemgt-op',
      group: '',
      label: '',
      type: '',
      bag:{},
      loading: true,
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
   changeData(){
    this.loadData()
   },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    close() {
      this.showGroup = false
      this.loadData(1)
    },
    closeLabel() {
      this.showLabel = false
      this.loadData(1)
    },
    addGroup(record) {
      this.showGroup = true
      console.log(record)
      this.group = record
    },
    addLabel(record, type) {
      this.showLabel = true
      this.label = record
      this.type = type
    },
    showBag(record) {
      // this.visible = true
      this.$refs.showbag.show(record)
      // this.bag=record
    },
    handleCancel() {
      // this.visible = false
      // setTimeout(()=>{
      //   this.loadData()
      // },3000)
    },
    update(color) {
      this.color = color
      this.showUpdate = true
    },
    changeGroup(record, type) {
      const text = type == 1 ? '启用' : '禁用'
      const states = type == 1 ? 'Y' : 'N'
      this.$confirm({
        content: '确定要' + text + record.tagName + '吗？',
        onOk: () => {
          const params = {
            id: record.id,
            states: states
          }
          getAction(`/basemgt-peoples/peoplePackage/tag/updatePeoplePackageTagStates`, params).then(data => {
            if (data.code == 200) {
              this.$message.success(text + '成功')
              this.loadData()
            } else {
              this.$message.warning(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
   

    async loadData() {
      console.log(222);
      const params = {}
      params.pageNo = this.pagination.current
      params.pageSize = this.pagination.pageSize
      const res = await tagList('tag', params)
      if (res.code == 200) {
        this.dataSource = res.data.peoplePackageTagList
         this.dataSource = this.dataSource.sort((a, b) => {
          return b.tagOrder - a.tagOrder;
        });
        this.pagination.total = res.data.count ? res.data.count :0
      } else {
        this.$message.warning(res.msg)
      }
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.mr-10 {
  margin-left: 10px;
}
.start::before {
  content: ' ';
  border: 3px solid red;
  border-radius: 3px;
  position: absolute;
  margin-left: -9px;
  margin-top: 7px;
}
.end::before {
  content: ' ';
  border: 3px solid green;
  border-radius: 3px;
  position: absolute;
  margin-left: -9px;
  margin-top: 7px;
}
</style>